<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime : 2020-01-12 10:17:11
 * @LastEditors  : Please set LastEditors
 -->
<template>
  <view>
    <view class="product">
      <view class="loan-intro" v-for="(item,index) in productList" :key="index" :data-id="item.id" @click="navigateUrl">
          <!-- 产品头部 -->
          <view class="loan-logo">
             <image
                  :src="hostIp+item.image"
                  mode="widthFix"
                  lazy-load="false">
              </image>
          </view>
          <view>
              <view class="loan-header">
                <view class="loan-title">
                  <view>{{item.name}}</view>
                </view>
                <view v-if='loanType!="like"'>
                  <view v-if="item.loanType!=0">{{item.readyLoan}}人申请</view>
                  <view class="loan-count" v-else>{{item.readyLoan}}人已通过申请</view>
                </view>
              </view>
              <!-- 产品内容 -->
              <view class="loan-content">
                <view class="babel">
                  <view class="babel-item">
                      <view v-if='type=="creditCard"'>最高额度(元)</view>
                      <view v-else>贷款金额(元)</view>
                  </view>
                  <view class="babel-item"> 
                    <view v-if='item.loanType==0'>通过率</view>
                      <view v-else>贷款利率</view>
                  </view>
                </view>
                <view class="loan-amount">
                    <view :class="['amount-num',item.loanType==0?'key0':item.loanType==1?'key1': item.loanType==2?'key2':item.loanType==3?'key3':'key4']">{{item.amount}}万</view>
                    <view class="line"></view>
                    <view :class="['amount-num',item.loanType==0?'key0':item.loanType==1?'key1': item.loanType==2?'key2':item.loanType==3?'key3':'key4']">{{item.rate}}%</view>
                    <view :class="['detail-btn',item.loanType==0?'key-bg-0':item.loanType==1?'key-bg-1': item.loanType==2?'key-bg-2':item.loanType==3?'key-bg-3':'key-bg-4']" :data-id="item.id" :data-link="item.link" @click="navigateUrl">查看详情</view>
                </view>
                  <view class="loan-tips" v-if="item.loanType==1">
                    <view class="loan-tips-item">按期还款</view>
                    <view class="loan-tips-item">提前还款无手续费</view>
                  </view> 
                  <view class="loan-tips" v-else>
                    <view class="loan-tips-item">审批迅速</view>
                    <view class="loan-tips-item">通过率高</view>
                  </view> 
                </view>
           </view>
        </view>
        
    </view>
  </view>  
</template>
<script>
import Vue from "vue"
import InterServer from "@/common/config/server"
import noData from '@/components/noData/noData';
export default {
  props:["productList","type","tagActive",'loanType'],
    components: {
      noData
    },
    data(){
     let hostIp=Vue.globalData.hostIp
      return {
        hostIp,
    
      };
    },
  created(){
  },
  methods: {
    //页面跳转
     navigateUrl(e){
      console.log(e.currentTarget.dataset.id)
      let dataset=e.currentTarget.dataset
      let [id,link]=[dataset.id,dataset.link]
        let url = `./loanDetails?id=${id}`;
        Vue.customNavigateTo(url);
     }
  }
};
</script>
<style lang="less" scoped>
.product {
      margin: 0 auto;
      overflow: hidden;
  .loan {
    &-intro {
      margin:0 auto 18upx;
      background:rgba(255,255,255,1);
      box-shadow:0px 4px 1px rgba(153,153,153,0.2);
      margin-bottom: 20upx;
      display: flex;
      align-items: center;
      padding-right: 40upx;
      justify-content: space-between;
    }
    &-logo{
      margin: 0 20upx 0 28upx;
      image{
        width: 92upx;
        height: 92upx;
      }
    }
    &-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40upx;
      line-height: 40upx;
      border-bottom: 1upx solid rgba(204,204,204,1);
      padding-right: 40upx;
      font-size:22upx;
      font-family:PingFang-Semibold;
      font-weight:bold;
      color:rgba(102,102,102,1);
    }
    &-count{
      width:200upx;
      height:30upx;
      text-align: center;
      background:linear-gradient(180deg,rgba(17,144,255,1) 0%,rgba(41,126,255,1) 100%);
      border-radius:4upx;
      font-size:22upx;
      font-family:PingFang-Semibold;
      font-weight:bold;
      line-height:30upx;
      color:rgba(255,255,255,1);
    }
    &-title {
      font-size: 28upx;
      color:rgba(51,51,51,1);
      font-weight: bold;
      display: flex;
      align-items: center;
      font-family:PingFang-Semibold;
    }
    &-content {
      padding: 0 40upx 0 0upx;
      .babel{
        width: 100%;
        display: flex;
        align-items: center;
        font-size:22upx;
        font-family:PingFang-Semibold;
        font-weight:bold;
        line-height:36upx;
        height: 36upx;
        color:rgba(102,102,102,1);
        .babel-item{
          width:202upx;
          line-height:36upx;
           height: 36upx;
           &:nth-child(2){
              width:212upx;
              margin-left: 30upx;
           }
        }
      }
      .loan-amount {
        font-size: 24upx;
        height:30upx;
        font-size:22upx;
        font-family:PingFang-Semibold;
        font-weight:bold;
        line-height:30upx;
        color:rgba(102,102,102,1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50upx;
        .amount-num {
           width:202upx;
          font-size:36upx;
          font-family:PingFang-Semibold;
          font-weight:bold;
          line-height:50upx;
          height: 50upx;
        }
        .key0{
           color:rgba(51,51,51,1);
        }
        .key1{
          color:rgba(51,102,255,1);
        }
        .key2{
          color:rgba(255,158,10,1);
        }
        .key3{
          color:rgba(51,102,255,1);
        }
          .key4{
          color:rgba(81,174,0,1);
        }
      }
      .line{
        width:1upx;
        height:50upx;
        background:rgba(204,204,204,1);
        margin-right: 30upx;
      }
      .detail-btn{
        width:160upx;
        height:44upx;
        box-shadow:0px 2upx 2upx rgba(204,204,204,1);
        border-radius:22upx;
        font-size:28upx;
        font-family:PingFang-Semibold;
        font-weight:bold;
        line-height:44upx;
        text-align: center;
        color:rgba(255,255,255,1);
      }
        .key-bg-0{
          color:rgba(51,51,51,1);
          background:rgba(255,255,255,1);
          border:1upx solid rgba(112,112,112,0.0.2);
        }
        .key-bg-1{
         background:linear-gradient(160deg,rgba(7,116,255,1) 0%,rgba(45,191,255,1) 100%,rgba(255,204,102,1) 100%);
        }
        .key-bg-2{
         background:linear-gradient(160deg,rgba(255,156,6,1) 0%,rgba(255,201,95,1) 99%,rgba(255,204,102,1) 100%);
        }
        .key-bg-3{
           background:linear-gradient(160deg,rgba(7,116,255,1) 0%,rgba(45,191,255,1) 100%,rgba(255,204,102,1) 100%);
        }
        .key-bg-4{
         background:linear-gradient(160deg,rgba(81,174,0,1) 0%,rgba(109,255,71,1) 99%,rgba(255,204,102,1) 100%);
        }
    }
    &-tips{
      display: flex;
      align-items: center;
      font-size:20upx;
      font-family:PingFang-Semibold;
      font-weight:bold;
      line-height:28upx;
      color:rgba(102,102,102,1);
      padding: 10upx 0;
      &-item{
        margin-right: 26upx;
      }
    }
  }
  .loding-more {
    height: 90upx;
    line-height: 90upx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1b65fa;
    font-size: 26upx;
    image {
      width: 26upx;
      height: 28upx;
      margin-left: 15upx;
    }
  }
}
</style>
